<template>
  <view class="phxx-item-detail">
    <view class="content-box">
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>业务类型</view>
          <view class="uni-select-box" @click="chooseBiz">
            <view v-if="!inputObj.bizType" class="placeholder">请先选择业务类型</view>
            <view v-else class="contns-select">{{businessText}}</view>
            <uni-icons type="forward" size="20" v-if="this.bizType.length > 1"></uni-icons>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>拉黑属性</view>
          <view class="uni-select-box" @click="isAttribute=true">
            <view v-if="!inputObj.attributes.length" class="placeholder">请先选择拉黑属性</view>
            <view v-else class="contns-select">{{attributeText}}</view>
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
        <view v-if="showCarBrand" class="uni-form-item">
          <view class="title"><span style="color: red">*</span>车牌号</view>
          <input :maxlength="8" class="uni-input" placeholder="请输入" v-model="inputObj.carBrand" />
        </view>
        <view v-if="showIDCard" class="uni-form-item">
          <view class="title"><span style="color: red">*</span>身份证号</view>
          <input :maxlength="18" class="uni-input" placeholder="请输入" v-model="inputObj.IDCard" />
        </view>
        <view class="uni-form-item">
          <view class="title">开始时间</view>
          <w-picker :visible="isStart" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'startTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.startTime" class="uni-input prd-mess" placeholder="不选择默认为提交时间" disabled="true"
            @click="isStart=true"></input>
        </view>
        <view class="uni-form-item">
          <view class="title">结束时间</view>
          <w-picker :visible="isEnd" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'endTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.endTime" class="uni-input prd-mess" placeholder="不选择默认为长期有效" disabled="true"
            @click="isEnd=true"></input>
        </view>
        <view class="uni-form-item">
          <view class="title">备注</view>
          <input :maxlength="200" class="uni-input" placeholder="请输入备注" v-model="inputObj.notes" />
        </view>
        <view class="btn-bottom">
          <button type="primary" :disabled="isLoading" class="bg-color-common-self" @click="handleSave">
            提交
          </button>
        </view>
      </view>
    </view>
    <select-search :show="isBusiType" title="选择业务类型" type="radio" :showSearch="false" :params="inputObj.bizType"
      name="label" value="value" :dataLists="bizType" @cancel="cancelPop(1)" @submit="submitBusiPop"></select-search>
    <select-search :show="isAttribute" title="选择拉黑属性" type="checkbox" :showSearch="false" :params="inputObj.attributes"
      :name="'label'" :value="'value'" :dataLists="attributes" @cancel="cancelPop(2)"
      @submit="submitPop"></select-search>
    <tip-box :show="showTip" :message="tipContent" :duration="2000" @showTip="showTip=false"></tip-box>
    <tip-box :show="showTip1" :message="tipContent" :duration="2000" @showTip="showTip1=false"></tip-box>
  </view>
</template>
<script>
  import { toast, getDateFormat, showConfirm } from '@/utils/common';
  import { getDictList } from '@/api/login';
  import { blacklistCreateByApp, getAccType } from '@/api/blackList';
  import { getTenantId } from '@/utils/auth';
  export default {
    data() {
      return {
        isStart: false,
        isEnd: false,
        isAttribute: false,
        isLoading: false,
        isBusiType: false,
        attributes: [],
        bizType: [
        ],
        businessText: '',
        inputObj: {
          bizType: 2,
          bizType: '',
          attributes: [],
          carBrand: '',
          IDCard: '',
          startTime: '',
          endTime: '',
          notes: ''
        },
        showTip: false,
        showTip1: false,
        tipContent: '',
        oneHour: 60 * 60 * 1000
      };
    },
    computed: {

      attributeText() {
        return this.inputObj.attributes.map(e => e.label).join(',')
      },
      showCarBrand() {
        return this.inputObj.attributes.some(e => e.value === '0')
      },
      showIDCard() {
        return this.inputObj.attributes.some(e => e.value === '1')
      }
    },
    mounted() {
      this.getTenant()
      this.getDictLists();
    },
    methods: {
      chooseBiz() {
        if (this.bizType.length > 1) {
          this.isBusiType = true
        }
      },
      async getTenant() {
        const res = await getAccType({ 'tenantId': getTenantId() });
        if (res.code === 0) {
          if (res.data.bizType.length > 1) {
            this.bizType = [
              {
                label: '销售',
                value: 2
              },
              {
                label: '采购',
                value: 1
              }
            ]
          } else {
            if (res.data.bizType[0] == 2) {
              this.bizType = [
                {
                  label: '销售',
                  value: 2
                }
              ]
              this.businessText = '销售'
              this.inputObj.bizType = 2
            } else {
              this.bizType = [
                {
                  label: '采购',
                  value: 1
                },
              ]
              this.businessText = '采购'
              this.inputObj.bizType = 1
            }
          }
        } else {
        }
      },
      async getDictLists() {
        const res = await getDictList();
        if (res.code === 0) {
          this.attributes = (res.data || []).filter(
            (e) => e.dictType === 'blacklist_attribute'
          );
        }
      },
      onConfirm(value, type) {
        this.inputObj[type] = value.result
        this.isStart = false
        this.isEnd = false
      },
      onCancel() {
        this.isStart = false
        this.isEnd = false
      },
      cancelPop(type) {
        if (type == 1) this.isBusiType = false
        else this.isAttribute = false
      },
      submitPop(data) {
        this.inputObj.attributes = data;
        this.isAttribute = false
      },
      submitBusiPop(data) {
        this.inputObj.bizType = data.value;
        this.businessText = data.label;
        this.isBusiType = false
      },
      async handleSave() {
        this.showTip = false
        this.showTip1 = false
        if (this.inputObj.bizType.length == 0) {
          toast('请先选择业务类型');
          return
        }
        if (this.inputObj.attributes.length == 0) {
          toast('请先选择拉黑属性');
          return
        }
        if (this.showCarBrand && !this.inputObj.carBrand) {
          toast('请输入车牌号');
          return
        }
        if (this.showIDCard && !this.inputObj.IDCard) {
          toast('请输入身份证号');
          return
        }
        const data = { ...this.inputObj }
        data.attributes = this.getAttributesParams()
        if (!!this.inputObj.startTime) {
          data.startTime = this.getTimeStamp(`${this.inputObj.startTime.slice(0, -5)}00:00`);
        } else {
          const currentDateTime = new Date()
          const startTimeStamp = currentDateTime.setMinutes(0, 0, 0)
          data['startTime'] = startTimeStamp
        }
        if (!!this.inputObj.endTime) {
          data.endTime = this.getTimeStamp(`${this.inputObj.endTime.slice(0, -5)}00:00`)
        } else {
          const futureDateTime = new Date(2099, 11, 30, 23, 59, 59)
          const endTimeStamp = futureDateTime.getTime()
          data['endTime'] = endTimeStamp
        }
        console.log(this.inputObj.startTime)
        console.log(this.inputObj.endTime)
        console.log(data.endTime - data.startTime)
        if (data.endTime == data.startTime) {
          toast('开始与结束时间间隔必须一小时以上');
          return
        }
        if (this.inputObj.startTime && this.inputObj.endTime) {
          if ((data.endTime - data.startTime) !== 0) {
            if ((data.endTime - data.startTime) < 0) {
              toast('结束时间必须晚于开始时间');
              return
            }
            if ((data.endTime - data.startTime) < 3600000) {
              toast('开始与结束时间间隔必须一小时以上');
              return
            }
          }
        }
        const paramData = {
          startTime: !!this.inputObj.startTime ? new Date(data.startTime).getTime() : data.startTime,
          endTime: !!this.inputObj.endTime ? new Date(data.endTime).getTime() : data.endTime, ...data
        }
        delete data.carBrand;
        delete data.IDCard;
        if (this.isLoading) return;
        this.isLoading = true;
        const res = await blacklistCreateByApp(paramData);
        if (res.code === 0 && res.data) {
          toast('新增成功');
          uni.navigateBack({
            url: '/pages/blackList/index'
          });
        } else {
          toast(res.msg);
        }
        this.isLoading = false;
      },
      getAttributesParams() {
        return this.inputObj.attributes.map(e => {
          return {
            attribute: e.value,
            name: e.value === '0' ? this.inputObj.carBrand : this.inputObj.IDCard
          }
        })
      },
      getTimeStamp(value) {
        return new Date(value).getTime()
      }
    },
  };
</script>
<style lang="scss" scoped>
  .btn-bottom {
    position: fixed;
    display: flex;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    padding: 0 15px;
    background-color: #fff;

    button {
      width: 100%;
      height: 45px !important;
      line-height: 45px !important;
      padding: 0;
      margin: 0;
    }
  }

  .placeholder {
    padding-left: 16rpx;
    color: #808080;
  }

  .phxx-item-detail {
    box-sizing: border-box;
    font-size: 14px;
    color: #000;
    margin: 20rpx;

    .uni-form-item {
      border-bottom: 1px solid #E6E6E6;
      display: flex;
      justify-content: space-between;
      line-height: 100rpx;
      height: 100rpx;
      color: #333;

      .uni-select-box {
        width: calc(100% - 186rpx);
        display: flex;
        justify-content: space-between;
        background: #fff;

        picker {
          width: 100%;

          .uni-input {
            color: #333 !important;
          }
        }

        .uni-icons {
          color: #999 !important;
          font-size: 30.22rpx !important;
        }
      }

      .w232 {
        width: 232rpx !important;
      }

      .title {
        width: 195rpx;
      }

      .title.wd220 {
        width: 240rpx;
        text-align: left;
      }

      .uni-input {
        flex: 3;
        border: 1px solid #fff;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 10rpx;
        padding: 0 10rpx;
        background-color: #fff;
        bottom: -14rpx;
        position: relative;
      }
    }
  }
</style>